/*Typography*/
@font-face {
    font-family: 'NewCicleFina';
    src: url('fonts/New_Cicle_Fina-webfont.eot');
    src: url('fonts/New_Cicle_Fina-webfont.eot?#iefix') format('embedded-opentype'),
        url('fonts/New_Cicle_Fina-webfont.woff') format('woff'),
        url('fonts/New_Cicle_Fina-webfont.ttf') format('truetype'),
        url('fonts/New_Cicle_Fina-webfont.svg#NewCicleFina') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Bebas';
    src: url('fonts/BEBAS___-webfont.eot');
    src: url('fonts/BEBAS___-webfont.eot?#iefix') format('embedded-opentype'),
        url('fonts/BEBAS___-webfont.woff') format('woff'),
        url('fonts/BEBAS___-webfont.ttf') format('truetype'),
        url('fonts/BEBAS___-webfont.svg#BebasRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
}
body {
    color: #434343;
}

h1, h2, h3 {
    margin: 0;
    padding: 0;
    font-family: 'NewCicleFina';
    font-weight: normal;
}

h1 {
    font-size: 1.75em;
}
h2 {  
    font-size: 1.50em;
}
h3{
    font-size: 1.25em; 
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Layout Styles */
.orange a {
    color: orange;
}
.orange .button {
    background: orange;
    color: white;
}

.orange #footer .block .block-content {
    background: orange;
    background: rgba(255,150,0,0.4);
}

.red a {
    color: red;
}
.red .button {
    background: red;
    color: white;
}

.red #footer .block .block-content {
    background: red;
    background: rgba(255,1,1,0.4);
}

.green a {
    color: green;
}
.green .button {
    background: green;
    color: white;
}

.green #footer .block .block-content {
    background: green;
    background: rgba(1,128,1,0.4);
}

.linen {
    background: url('images/linen.jpg') 0 0 repeat;
}

.abstract {
    background: url("images/abstract-cross.png") repeat scroll 50% 0 #FFFFFF;
}

.abstract div.bg{
    background: url('images/abstract.png') repeat-y 50% scroll transparent;
}

.chalk {
    background: url('images/chalk.jpg') 0 0 repeat;
}

.chalk div.bg {
    background: url('images/chalk_img.jpg') no-repeat scroll 50% 0 transparent;
}

.chalk .navigation a {
    color: white;
}

.chalk footer {
    color: white;
}

/* Basic Styles */
br.clearfix {
    clear: both;
}

body {
    font-family: Arial;
    background: gray;
}

label {

    float: left;
}

input {
    width: 250px;
}

input.submit {
    width: 125px;
    height: 25px;
}

table.gebruikers {
    width: 800px;
}

table.gebruikers td {
    width: 15%;
}

.sidebar {
    width: 320px;
}

.sidebar h1 {
    padding: 14px 0 0 0;
}

.left {
    float: left;
}

.right {
    float: right;
}

.center {
    text-align: center;
}

.wrapper {
    width:940px;
    margin: 0 auto;
    padding: 20px 0;
}

.content-wrapper {
    background: white;
    padding: 20px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}

.header-wrapper {
    height: 60px;
    padding: 0 0 20px 0;

}

.news-item {
    margin: 20px 0;
}

.news-content {
    width: 450px;
    float: right;
}
.news-item-content{
    width: 490px;
}

#banner {
    width: 700px;
    height: 150px;
    background: url('images/banner.png') 0 0 no-repeat;
    font-family: 'Bebas';
    text-align: center;
    padding: 100px;
}

#banner span{
    margin: auto 0;
    color: white;
    font-size: 80px;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);;
}

.orange #banner span:nth-child(2){
    color: orange;
}
.red #banner span:nth-child(2){
    color: red;
}
.green #banner span:nth-child(2){
    color: green;
}

#date {
    float: left;
    width: 90px;

}

#date span {
    float: left;
    margin: 0 auto;
    width: 100%;
    text-align: center;
}

#date span:nth-child(1) {
    font-size: 66px;
}

#date span:nth-child(2) {
    font-size: 1.25em;
    text-align: center;
}

.content{
    width: 540px;
}


.full {
    width: 900px;
}

.block {
    width: 264px;
    height: 180px;
    background: lightgrey;
    float: left;
    padding: 10px;
    overflow: hidden;
}

.block:nth-child(2) {
    margin: 0 20px;
}

hr {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); 
    margin: 20px 0;
}

p {
    margin: 20px 0;
}

/*Custom styles*/
.button {
    display: block;
    height: 20px;
    padding: 10px;
    float: left;
    margin: 5px;
    color: white;
    transition: background 0.2s ease-in-out;
}
input.button{
    border: 0;
    height: 40px;
}
.button:hover {
    background: gray;
    text-decoration: none;
}
a.icon {
    height: 16px;
    width: 16px;
    display: block;
    overflow: hidden;
    text-indent: 32px;
    line-height: 32px;
    float: left;
}
a.edit {
    background: url('images/icon-edit.png') 0 0 no-repeat;
}

a.view {
    background: url('images/icon-view.png') 0 0 no-repeat; 

}

a.delete {
    background: url('images/icon-delete.png') 0 0 no-repeat;     
}
.logo a {
    width: 150px;
    height: 60px;
    overflow: hidden;
    background: url('images/logo.png') 0 0 no-repeat;
    background-size: 150px 60px;
    display: block;
    text-indent: 150px;
    line-height: 150px;
}

.language ul {
    margin: 20px 0;
}

.language ul li {
    margin: auto 10px;
    float: left;
    list-style: none;

}

.language ul li a {
    width: 25px;
    height: 20px;
    overflow: hidden;
    background: white;
    display: block;
    text-indent: 150px;
    line-height: 150px;
}

#english a {
    background: url('images/flag-uk.png') 0 0 no-repeat;
}
#dutch a {
    background: url('images/flag-nl.png') 0 0 no-repeat;
}

ul.navigation {
    margin: 15px 0;
}

ul.navigation li {
    float: left;
    margin: auto 10px;
    list-style: none;
    font-family: 'NewCicleFina';
    font-size: 1.60em;
}

ul.navigation li a {
    color: #434343;
}

li.active {
    border: 1px solid white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}

.popular-courses {
    background: url('images/icon-person.png') 0 0 no-repeat;    
    padding: 0 0 0 80px;
}
.side-profile {
    background: url('images/icon-person.png') 0 0 no-repeat;    
    padding: 0 0 0 80px;
    list-style: none;
}
.test-completed{
    color: #468847;
    border-color: #D6E9C6;
    background-color:#DFF0D8!important;
}
.test-score .test-completed td:nth-child(2), .check-icon{
    background: url('images/check-icon.png') 5px 5px no-repeat ; 
}
.test-failed{
    color: #B94A48;
    background-color: #F2DEDE!important;
    border-color: #EED3D7;
}
.test-score .test-failed td:nth-child(2), .cross-icon{
    background: url('images/cross-icon.png') 5px 5px no-repeat; 
}
.popular-courses ul li {
    margin: 20px 0;
    list-style: none;
}

.latest-news {
    background: url('images/icon-book.png') 0 0 no-repeat;    
    padding: 0 0 0 80px;
}

.latest-news ul li {
    margin: 20px 0 0 0;
    list-style: none;
}

footer {
    text-align: center;
    margin: 20px;
}

#footer .block {
    color: white;
}

#footer .block .block-content {
    transition: all 0.3s ease 0s;
    opacity: 0;
    padding: 10px;
    width: 244px;
    height: 160px;
    overflow: hidden;
    transition: opacity 0.2s ease-in-out;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -ms-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;

}

#footer .block:hover .block-content {
    opacity: 1;
}
.forum th{

}

table.zebra {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0
}

table.zebra th {
    font-size: 16px;
    font-weight: normal;
    text-align: left;
}

table.zebra th, table.zebra td {
    padding: 5px;
}

table.zebra tbody td {
    border-bottom: 1px solid #DDDDDD;
    height: 30px;
}

table.zebra tbody tr:first-child td {
    border-top: 1px solid #DDDDDD;
}

table.zebra tbody tr:nth-of-type(2n+1) {
    background: none repeat scroll 0 0 #FAFAFA;
}

.error {
    display: none;
}

/* -------------------- Course View -------------------  */

.course-table th{
    text-align:left; 
}
.course-picture{
    border:2px solid orange;
    width:150px;
    height:150px;
    display:block;
}
.course-header{
    clear:right;
    padding-right:5px;
}
.edit{
    top:5px;
}
.progress-bar{
    height:20px;
    width:200px;
    border:1px solid black;
}
.progress-bar-status{
    height:20px;
    background-color:green;
    padding-left:10px;
}
.wrapper-course{
    width:100%;
    height:170px;
}.course-description{
    margin-left:20px;
    width:360px;
}

.navigation-course div{
    float:left;
    height:150px;
    width:120px;  
}
.navigation-course img{
    margin-left:10px; 
}
.navigation-course{
    margin-top:20px;
}
.navigation-course p{
    margin-top:5px;
    color:black;
    position:relative;
    text-align:center;
}
.chapters{
    clear:both;
}
.chapters table th{
    text-align:left;
}
.chapters .completed{
    background: url("${imgurl}check-icon-course.png") 0 0 no-repeat;
    background-size:20px 20px;
    background-position: 10px 10px;
}
.user-table th{
    text-align:left; 
}
.profile-picture{
    border:2px solid orange;
}
.profile-header{
    padding-right:5px;
    padding-bottom:20px;
}
.edit{
    position:relative;
    top:5px;

}
.login{
    background: darkgrey;
    background: url('images/login.png') no-repeat 0 0 ;
    padding: 100px 230px;
}

.login-box{
    width: 400px;
    background: lightgrey;
    background: rgba(0,0,0,0.4);
    margin: 100px auto;
    padding: 20px;
}
.login-box h2, .login-box label{
    color: white;
    text-align: center;
}

.questions {
    list-style: none;
}
.questions li {
    padding: 5px;
}
.question input {
    margin: 0 5px 0 0;
}
.white{
    color:#FFF;
}

.alert-error {
    color: #B94A48;
    background-color: #F2DEDE!important;
    border-color: #EED3D7;
}
.alert {
    padding: 8px 35px 8px 14px;
    margin-bottom: 20px;
    margin-top:30px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    background-color: #FCF8E3;
    border: 1px solid #FBEED5;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}